import "../utils/rem.js"; // rem布局
import "../commom/common.scss"; // 公共样式
import "./style.scss"; // 搜索的样式
import { getInterface } from "../service"; // 接口函数
import { $ } from "../utils/util.js";

// 初始化调用
renderHots(); // 渲染热门搜索
renderHistory(); // 渲染搜索历史

// 使用节流函数处理键盘按下函数
const fn = throttle(onKeyup, 1000);

// 事件

// 输入框的键盘按下事件
$("input").addEventListener("keyup", fn);

// 叉cancel的点击事件
$(".cancel").addEventListener("click", function () {
  // console.log(1)
  // 清空input的值
  $("input").value = "";
  show("history", "hots"); // 显示 热门 历史
  // 搜索重新获取焦点
  $("input").focus();
  renderHots(); // 渲染热门搜索
  renderHistory(); // 渲染搜索历史
});

// 点击span
$("main").addEventListener("click", (e) => {
  if (e.target.nodeName === "SPAN") {
    console.log(e.target.innerHTML);
    // 显示 叉 搜索结果
    show("cancel", "result");
    // input的值
    $("input").value = e.target.innerHTML;
    renderSearch(e.target.innerHTML); // 渲染搜索结果
  }
  // 点击x
  if (e.target.classList.contains("icon-cha")) {
    // 获取本地保存的搜索历史
    let history = JSON.parse(localStorage.getItem("history"));
    history = history.filter(
      (v) => v !== e.target.parentNode.children[1].innerHTML,
    );
    // 传回本地
    localStorage.setItem("history", JSON.stringify(history));
    // 干掉
    e.target.parentNode.remove();
  }
});

// 函数

// 节流函数
function throttle(fn, wait) {
  let startTime = 0;
  let lastArgs = null; // 缓存最后一次调用的参数
  let timer = null;

  return function (...args) {
    const now = Date.now();
    const elapsed = now - startTime;

    // 如果距离上次执行超过wait，立即执行
    if (elapsed >= wait) {
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
      fn.apply(this, args);
      startTime = now;
    } else {
      // 否则缓存参数，确保最后一次会执行
      lastArgs = args;
      const context = this;

      // 如果没有计时器，设置一个在剩余时间后执行
      if (!timer) {
        timer = setTimeout(() => {
          fn.apply(context, lastArgs);
          startTime = Date.now();
          timer = null;
        }, wait - elapsed);
      }
    }
  };
}

// 输入框键盘按下调用的回调函数
async function onKeyup(e) {
  // input的值
  const val = this.value.trim();
  // console.log(val)
  // 如果input的值不是空
  if (val) {
    show("cancel", "advice"); // 显示 叉 和 建议
    renderAdvice(val); // 渲染搜索建议

    // 按下回车时
    if (e.keyCode === 13) {
      // console.log(111)
      renderSearch(val); // 渲染搜索结果
      show("cancel", "result"); // 显示 叉 和 结果
    }
  } else {
    renderHots(); // 渲染热门搜索
    renderHistory(); // 渲染搜索历史
    show("hots", "history"); // 显示 热门 和 历史
  }
}

// 搜索建议
async function renderAdvice(val) {
  // 调搜索建议接口
  const res = await getInterface("/search/suggest?type=mobile&keywords=" + val);
  const data = res.data.result.allMatch;
  // 同步搜索后面的文字和输入框一致
  $(".advice h3 span").textContent = val;
  // console.log(data)
  $(".advice .all").innerHTML = data
    ? data
        .map(
          (v) => `
    <p><i class="icon-search">&#8981;</i> <span>${v.keyword}</span></p>
  `,
        )
        .join("")
    : "无结果...";
}

// 热门搜索
async function renderHots() {
  // 热门搜索
  const res = await getInterface("/search/hot");
  // console.log(res.data.result.hots)
  // 渲染热门搜索词条
  $(".hots .all").innerHTML = res.data.result.hots
    .map(
      (item) => `
    <span>${item.first}</span>
  `,
    )
    .join("");
}

// 搜索结果
async function renderSearch(val) {
  // 调搜索接口
  const res = await getInterface("/cloudsearch?keywords=" + val);
  // console.log(res.data)
  const data = res.data.result.songs;
  // 渲染搜索的结果
  $(".result").innerHTML = data
    ? res.data.result.songs
        .map(
          (v) => `
    <div class="item" data-id="${v.id}">
      <h3>${v.name}</h3>
      <p>${v.ar.map((i) => i.name).join(" / ")}</p>
      <i>&blacktriangleright;</i>
    </div>
  `,
        )
        .join("")
    : "无结果";
  // 获取本地保存的搜索历史
  const history = JSON.parse(localStorage.getItem("history") || "[]");
  // 将本次搜索结果上传本地
  // if (history)
  // 下标
  const index = history.findIndex((v) => v === val);
  if (index !== -1) history.splice(index, 1);
  history.unshift(val);
  localStorage.setItem("history", JSON.stringify(history));
}

// 搜索历史
function renderHistory() {
  // 从本地获取搜索历史
  const history = JSON.parse(localStorage.getItem("history") || "[]");
  // 渲染搜索历史
  $(".history").innerHTML = history
    .map(
      (item) => `
    <p><i class="icon-time">&#9200;</i> <span>${item}</span> <i class="icon-cha">&times;</i></p>
  `,
    )
    .join("");
}

// 显示自己隐藏其他 函数
function show(...arr) {
  let all = ["history", "hots", "result", "advice", "cancel"];
  // // 在all 中将传入的类名移除
  // all = all.filter(v => !arr.some(i => i === v))
  // // 隐藏all中的元素
  // all.forEach(v => {
  //   $('.' + v).classList.add('hide')
  // })
  // // 显示传入的元素
  // arr.forEach(v => {
  //   $('.' + v).classList.remove('hide')
  // })
  // 遍历all 其中 在arr中的移除hide, 其他的添加hide
  all.forEach((item) => {
    arr.some((v) => v === item)
      ? $("." + item).classList.remove("hide")
      : $("." + item).classList.add("hide");
  });
}
